<template>
    <div class="current_history">
        <div class="current">
            <div class="title">当前定位</div>
            <div class="currentPosition">
                <van-tag class="tag"
                    round
                    color="#F5F5F5"
                    text-color="#333333"
                    size="large"
                    v-if="currentCity"
                    @click="cityClick">
                    <span class="content">{{currentCity.name | formatCityName}}</span>
                </van-tag>
                <van-tag class="tag"
                    round
                    color="#F5F5F5"
                    text-color="#333333"
                    size="large"
                    v-if="currentStreet"
                    @click="streetClick">
                    <span class="content">{{currentStreet.name}}</span>
                </van-tag>
                <van-tag class="tag"
                    round
                    color="#F5F5F5"
                    text-color="#333333"
                    size="large"
                    @click="countryClick">
                    <span class="content">全国</span>
                </van-tag>
            </div>
        </div>
        <div class="history">
            <div class="title">历史记录</div>
            <div class="historyPosition">
                <van-tag class="tag"
                    round
                    color="#F5F5F5"
                    text-color="#333333"
                    size="large"
                    v-for="(item, index) in historyAddress"
                    @click="historyAddressClick(item)"
                    :key="index">
                    <span class="content">{{item.name | formatCityName}}</span>
                </van-tag>
            </div>
        </div>
    </div>
</template>

<script>
import {formatCityName} from '../utils/format'
import constant from '../utils/constant'

export default {
  name: 'CurrentAndHistory',
  props: {
    currentCity: Object,
    currentStreet: Object,
    historyAddress: Array,
    prePage: String,
    jobTypeId: String
  },

  filters: {
    formatCityName(cityName) {
      return formatCityName(cityName)
    }
  },

  methods: {
    cityClick() {
      this.handleCurrentCity(this.currentCity.id, this.currentCity.name)
    },
    streetClick() {
      this.handleCurrentStreet(
        this.currentCity.id,
        this.currentCity.name,
        this.currentStreet.id,
        this.currentStreet.name
      )
    },
    countryClick()
    {
      const self = this
      let address = {
        type: '1', // 1为城市；2为街道
        id: '',
        name: "全国"
      }
      self.$router.push({
        name: self.prePage
      })

      // 当前城市
      self.$addStorageEvent(1, constant.STORAGE_CURRENT_ADDRESS, JSON.stringify(address))
      self.$addStorageEvent(1, constant.STORAGE_CURRENT_ADDRESS_VALUE, "全国")
    },
    historyAddressClick(item) {
      if (item.type === '1') {
        this.handleCurrentCity(item.id, item.name)
      } else {
        // TODO: 目前街道也按城市处理
        this.handleCurrentStreet(item.cityId, item.cityName, item.id, item.name)
      }
    },

    handleCurrentCity(cityId, cityName) {
      const self = this
      let address = {
        type: '1', // 1为城市；2为街道
        id: cityId,
        name: cityName
      }

      //正向地理编码
      AMap.plugin('AMap.Geocoder', function () {
        let geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国'
        })

        geocoder.getLocation(cityName, function (status, data) {
          if (status === 'complete' && data.info === 'OK') {
            // result为对应的地理位置详细信息
            // console.log('城市坐标查询', data)
            self.$addStorageEvent(1, constant.STORAGE_CURRENT_LAT, data.geocodes[0].location.lat)
            self.$addStorageEvent(1, constant.STORAGE_CURRENT_LNG, data.geocodes[0].location.lng)
            // 当前城市
            self.$addStorageEvent(1, constant.STORAGE_CURRENT_ADDRESS, JSON.stringify(address))
            self.$addStorageEvent(1, constant.STORAGE_CURRENT_ADDRESS_VALUE, cityName)
          }

          console.log('router', self.jobTypeId)
          self.$router.push({
            name: self.prePage,
            // query: {id: self.jobTypeId}
          })
        })
      })
    },

    handleCurrentStreet(cityId, cityName, streetId, streetName) {
      // TODO: 这里街道还是按城市来处理
      const self = this
      let address = {
        type: '1', // 1为城市；2为街道
        id: cityId,
        name: cityName
      }

      //正向地理编码
      AMap.plugin('AMap.Geocoder', function () {
        let geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: cityName
        })

        geocoder.getLocation(streetName, function (status, data) {
          if (status === 'complete' && data.info === 'OK') {
            // result为对应的地理位置详细信息
            console.log('城市坐标查询', data)
            self.$addStorageEvent(1, constant.STORAGE_CURRENT_LAT, data.geocodes[0].location.lat)
            self.$addStorageEvent(1, constant.STORAGE_CURRENT_LNG, data.geocodes[0].location.lng)
            self.$addStorageEvent(1, constant.STORAGE_CURRENT_ADDRESS, JSON.stringify(address))
            self.$addStorageEvent(1, constant.STORAGE_CURRENT_ADDRESS_VALUE, streetName)
          }

          self.$router.push({
            name: self.prePage,
            // query: {id: self.jobTypeId}
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.current_history {
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box;
  width: 100%;
  padding-left: 16px;
  background-color: #ffffff;
  margin-bottom: 8px;
  .current {
    padding-top: 1px;
    .title {
      margin: 16px 0;
      font-size: 13px;
      font-weight: bold;
    }
    .currentPosition {
      .tag {
        margin-right: 13px;
        margin-bottom: 13px;
        .content {
          padding: 3px;
          font-size: 13px;
        }
      }
    }
  }
  .history {
    .title {
      padding-top: 3px;
      margin-bottom: 16px;
      font-size: 13px;
      font-weight: bold;
    }
    .historyPosition {
      /*border: 1px solid red;*/
      .tag {
        margin-right: 13px;
        margin-bottom: 13px;
        .content {
          padding: 3px;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
